<template>
  <div class="big-login-box">
  <div class="login-container">
    <header class="clearfix">
      <!-- 扫码下载 -->
      <ul class="download-icon clearfix" attr-lang="">
        <li class="app-store app-wrap"><a href="javascript:void(0)"></a>
          <ul class="app-dialog">
            <i class="fa fa-play" aria-hidden="true"></i>
            <div><img src="../../assets/img/login/app_ios.png"></div>
          </ul>
        </li>
        <li class="google-play app-wrap"><a href="javascript:void(0)"></a>
          <ul class="app-dialog">
            <i class="fa fa-play" aria-hidden="true"></i>
            <div><img src="../../assets/img/login/app_android.png"></div>
          </ul>
        </li>
        <li class="local-play app-wrap"><a href="javascript:void(0) "></a>
          <ul class="app-dialog">
            <i class="fa fa-play" aria-hidden="true"></i>
            <div><img src="../../assets/img/login/localdown.png"></div>
          </ul>
        </li>
      </ul>
      <ul class="right-wrap">
        <li><a @click='handleCommand("1")'>{{$t('login.sampleUser')}}</a></li>

        <li><el-dropdown  @command="uesrGuideDown" class="language" size="small">
        <span class="el-dropdown-link">
            {{$t('login.js_uesrGuide')}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">{{$t('login.js_uesrGuide_new')}}</el-dropdown-item>
            <el-dropdown-item command="3">{{$t('login.js_uesrGuide_new_app')}}</el-dropdown-item>
            <el-dropdown-item command="2">{{$t('wifi-connect-guid')}}</el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown></li>
        <!-- <li><a @click='uesrGuideDown'>{{$t('login.js_uesrGuide')}}</a></li> -->
        <li>
            <LangSelect></LangSelect>
        </li>
      </ul>
    </header>
    <div class="content clearfix">
      <div class="content-text-box">
        <h2>Energy of the Future</h2>
        <h4>For Residential & Commercial Sites Use</h4>
      </div>
      <div class="form-box">
        <div class="logo-wrap">
          <img class="logo" id="logo" src="../../assets/img/login/login-dark-icon.png">
        </div>
        <el-form>
          <el-form-item>
            <el-input v-model="username" :placeholder="$t('login.pointUserName')" @keyup.enter.native="loginin" @focus="()=>{showPassword=true}" class="input"></el-input>
            <ul :class="[{'rememberList':true},{'active':showPassword}]" @blur="()=>{showPassword=false}">
              <li v-for="(item,i) in pwdList" :key="item.username" @click.prevent="setPassword(item)">
                <span class="re_name">{{item.username}}</span>
                <input disabled type="password" class="re_pwd" :value="item.password">
                <button type="button" class="btn-close close" @click.stop="deletePassword(i)">╳</button>
              </li>
            </ul>
          </el-form-item>
          <el-form-item>
            <el-input v-model="password" :placeholder="$t('login.pointPwd')" show-password @keyup.enter.native="loginin"></el-input>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="rememberFlag">{{$t('login.rememberPwd')}}</el-checkbox>
            <span class="pull-right pointer" @click="forgotPwd()">{{$t('login.forgotPwd')}}</span>
          </el-form-item>
          <el-form-item>
            <el-button class="highlight" @click="loginin" @keyup.enter.native="loginin">{{$t('login')}}</el-button>
            <el-button @click="gotoRegister()">{{$t('login.signUp')}}</el-button>
          </el-form-item>
          <el-alert v-show="errorMsg!=''" :title="errorMsg" type="error" :closable="false" show-icon></el-alert>
        </el-form>
      </div>
    </div>
    <footer>
      <ul class="nav-item clearfix">
			<li><a href="http://solaxpower.com/about" target="_blank">{{$t('login.aboutUs')}}</a></li>
			<li><a href="http://solaxpower.com/contact" target="_blank">{{$t('login.faq')}}</a></li>
			<li><a href="http://solaxpower.com/contact" target="_blank">{{$t('login.contact')}}</a></li>
		</ul>

		<div class="copyright">
          {{$t('login.copyright')}}<i class="fa fa-camera-retro fa-lg"></i>
		</div>
		<div class="police-info">
			<span><a href="https://beian.miit.gov.cn/" target="_blank">浙ICP备13004659号-3</a></span>
			<span>
				<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33012202330769" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
				<img src="../../assets/img/login/police.png" style="float:left;"/>
				<p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#555;">浙公网安备 33012202330769号</p>
				</a>
			</span>
		</div>
    </footer>
    <el-dialog class="selectDialog" :visible.sync="dialogFormVisible" :close-on-click-modal="false" @close="closeLan()">
      <h2 class="title">SELECT YOUR LANGUAGE</h2>
      <ul class="country_list clearfix">
        <li>
          <a href="javascript:void(0)" @click="changeLan('zh_CN')">
            <div class="flag flag-China"></div>
            <span>简体中文</span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)" @click="changeLan('en_US')">
            <div class="flag flag-English"></div>
            <span>English</span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)" @click="changeLan('de_DE')">
            <div class="flag flag-Deutsch"></div>
            <span>Deutsch</span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)" @click="changeLan('it_IT')">
            <div class="flag flag-Italiano"></div>
            <span>Italiano</span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)" @click="changeLan('fr_FR')">
            <div class="flag flag-Français"></div>
            <span>Français</span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)" @click="changeLan('nl_NL')">
            <div class="flag flag-Nederlands"></div>
            <span>Nederlands</span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)" @click="changeLan('ru_RU')">
            <div class="flag flag-Russian"></div>
            <span>русский</span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)" @click="changeLan('es_ES')">
            <div class="flag flag-Spanish"></div>
            <span>Espanol</span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)" @click="changeLan('sk_SK')">
            <div class="flag flag-Slovak"></div>
            <span>Slovenčina</span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)" @click="changeLan('pt_BR')">
            <div class="flag flag-Portugal"></div>
            <span>Português</span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)" @click="changeLan('cs_CZ')">
            <div class="flag flag-Čeština"></div>
            <span>Čeština</span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)" @click="changeLan('pl_PL')">
            <div class="flag flag-Polska"></div>
            <span>Polski</span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)" @click="changeLan('ja_JP')">
            <div class="flag flag-Japan"></div>
            <span>日本語</span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)" @click="changeLan('ro_RO')">
            <div class="flag flag-Română"></div>
            <span>Română</span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)" @click="changeLan('ka_GE')">
            <div class="flag flag-ქართული"></div>
            <span>ქართული</span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)" @click="changeLan('fi_FI')">
            <div class="flag flag-Suomi"></div>
            <span>Suomi</span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)" @click="changeLan('tr_TR')">
            <div class="flag flag-Türkçe"></div>
            <span>Türkçe</span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)" @click="changeLan('bg_BG')">
            <div class="flag flag-България"></div>
            <span>България</span>
          </a>
        </li>
      </ul>
    </el-dialog>
    <agree :agreeResData='agreeResData'></agree>
  </div>
  </div>
</template>

<script>
import LangSelect from '@/components/LangSelect'
import md5 from 'js-md5'
import agree from './agreement_new.vue'
export default {
  name: 'Login',
  components:{
    LangSelect,
    agree
  },
  data(){
    return {
      username:'',
      password:'',
      pwdList:JSON.parse(localStorage.getItem('pwdList')||'[]'),
      showPassword:false,
      errorMsg:'',
      dialogFormVisible:!localStorage.getItem('lang')?true:false,
      rememberFlag:JSON.parse(localStorage.getItem('rememberFlag')||'0')||false,
      guideUrl:window.location.href.split('#')[0] + 'guide/Solaxcloud_Web_User_Guide_V2.0_Enduser_CN.pdf',
      agreeResData:{}
    }
  },
  computed:{
    loginNotify(){
        return this.$store.state.sysStore.loginNotify
    }
  },
  mounted(){
    this.getServerLocation()

    //自动填充已记住的密码
    if(this.pwdList!=null){
      let pwd=this.pwdList[0]
      this.username=pwd.username
      this.password=pwd.password
    }

    let that=this
    document.addEventListener('click',function(e){
			if(e.target.className!='rememberList' && e.target.className.indexOf('el-input')<0 && that.showPassword==true){
        that.showPassword=false
			}
    })
  },
  methods:{
    uesrGuideDown(val){
      let lan = localStorage.getItem('lang')
      if(val == 1){
        let en = window.location.href.split('#')[0] + 'guide/Solaxcloud_Web_User_Guide_Enduser_EN(decode).pdf'
        let cn = window.location.href.split('#')[0] + 'guide/Solaxcloud_Web_User_Guide_Enduser_CN(decode).pdf'
        // let cn = window.location.href.split('#')[0] + 'guide/Solaxcloud_Web_User_Guide_V2.0_Enduser_CN.pdf'
        // let en = window.location.href.split('#')[0] + 'guide/Solaxcloud_Web_User_Guide_V2.0_Enduser_EN.pdf'
        // let ja = window.location.href.split('#')[0] + 'guide/Solaxcloud_Web_User_Guide_V2.0_Enduser_JP.pdf'
        // let lan = localStorage.getItem('lang')
        // if(lan=='zh_CN'){
        //   window.open(cn)
        // }else if(lan=='ja_JP'){
        //   window.open(ja)
        // }else{
        //   window.open(en)
        // }
        if(lan=='zh_CN'){
          window.open(cn)
        }else{
          window.open(en)
        }
      }else if(val == 2){
        window.open(window.location.href.split('#')[0] + 'wifiGuidance/index.html', '', 'width=400,height=640,top=50, left=400, toolbar=no, menubar=no, scrollbars=no,location=no,help=off;resizable=off;scroll=no;status=off')
      }else if(val == 3){
        let en = window.location.href.split('#')[0] + 'guide/Solaxcloud_APP_User_Guide_Enduser_EN(decode).pdf'
        let cn = window.location.href.split('#')[0] + 'guide/Solaxcloud_APP_User_Guide_Enduser_CN(decode).pdf'
        if(lan=='zh_CN'){
          window.open(cn)
        }else{
          window.open(en)
        }
      }

    },
    async getServerLocation(){
      let res=await this.API.getServerLocation({})
      if(res){
        localStorage.setItem('mapType',res)
      }else if(localStorage.getItem('mapType')==null){
        localStorage.setItem('mapType',1)
      }
      if(localStorage.getItem('mapType')==2){
        this.UtilsFun.createGoogle()
      }
    },
    async handleCommand(val){
      //示例用户
      if(val == 1){
        let res = await this.API.loginIn({
          username:'guest',
          userpwd:md5('solax123456'),
        })
        console.log('sadasdas');
        if(res.success){
          sessionStorage.setItem('token',res.token);
          sessionStorage.setItem('loginURL',window.location);
          sessionStorage.setItem('userObj',JSON.stringify(res.user));//保存用户数据
          localStorage.setItem('userId',res.user.ids);
          localStorage.setItem('userType',res.user.userType);

          //示例用户静态数据
          sessionStorage.setItem("selRow_siteId",'');
          sessionStorage.setItem("selRow_userId",res.user.ids);
          sessionStorage.setItem("selRow_inverter_sn",'SD731712210799');
          sessionStorage.setItem("selRow_wifi_sn",'ZUPTTDQX');
          sessionStorage.setItem("selRow_firmId",'504827906329935872');
          
          this.$router.push({ path: '/exampleSite' })
        }else{
          this.errorMsg = this.$t('example-user-login-fail');
        }
      }
      if(val == 2){
        //wifi指南
        window.open(window.location.href.split('#')[0] + 'wifiGuidance/index.html', '', 'width=400,height=640,top=50, left=400, toolbar=no, menubar=no, scrollbars=no,location=no,help=off;resizable=off;scroll=no;status=off')
      }
    },
    async loginin(){
      if(this.username==''){
        this.errorMsg= this.$t('site.enterUserName');
        return
      }
      if(this.password==''){
        this.errorMsg= this.$t('login.pointPwd');
        return
      }
      let res = await this.API.loginIn({
        username:this.username,
        userpwd:md5(this.password)
      })
      if(res){
        if(this.loginNotify){
          this.loginNotify.close()
        }
        let errCode=res.loginCode
        if(res.success){
          if(errCode=='0'){
            //记住密码
            if(this.rememberFlag){
              let obj={username:this.username,password:this.password}
              let pwdList=[]
              if(localStorage.getItem('pwdList')!=null){
                pwdList=JSON.parse(localStorage.getItem('pwdList'))
              }
              pwdList.forEach((item,i)=>{
                if(this.username==item.username){
                  pwdList.splice(i,1)
                }
              })
              pwdList.unshift(obj)
              localStorage.setItem('pwdList',JSON.stringify(pwdList))
              console.log(pwdList)
            }
            localStorage.setItem('rememberFlag',JSON.stringify(this.rememberFlag))

            sessionStorage.setItem('token',res.token);
  
            sessionStorage.setItem('loginURL',window.location);//ODM需求保存登录地址
            sessionStorage.setItem('loginTime',this.$options.filters['dateFormat'](new Date()));
            res.user.password=md5(this.password);//修改密码时需要
            sessionStorage.setItem('userObj',JSON.stringify(res.user));//保存用户数据
            localStorage.setItem('appUserObject',JSON.stringify(res.user));//保存用户数据
            localStorage.setItem('userId',res.user.ids);
            localStorage.setItem('userType',res.user.userType);
            localStorage.setItem('appUserId',res.user.ids);
  
            let userType=res.user.userType
            if(userType!=5){
              this.$router.push({ path: '/overview_agent' })
            }else{
              this.$router.push({ path: '/overview' })
            }
          }else if(errCode=='6'){
            this.agreeResData = res
            this.$store.commit('setVisibleInfo',true)
          } 
        }else{
          if(errCode=='2'){
            this.errorMsg= this.$t('login.js_none_user');
          }else if(errCode=='3'){
            this.errorMsg=this.$t('login.js_error_pwd') +res.surplusTimes+this.$t('login.js_error_pwd_numunit');
          }else if(errCode=='4'){
            this.errorMsg=this.$t('login.js_error_loginTime')
          }else if(errCode=='5'){
            this.errorMsg=this.$t('login.js_error_id')
          }else if(errCode=='6'){
            //打开regsterAgreementPlus
            this.$store.commit('setVisibleInfo',true)
          }else if(errCode=='7'){
            this.errorMsg=this.$t('login.js_firm_isdeleted')
          }
        }
      }else{
        this.errorMsg=this.$t('service-error-contact-admin')
      }
    },
    setPassword(item){
      this.username=item.username
      this.password=item.password
      this.showPassword=false
    },
    deletePassword(i){
      this.pwdList.splice(i,1)
      localStorage.setItem('pwdList',JSON.stringify(this.pwdList))
    },
    async forgotPwd(){
      if(!this.username){
        this.$message.error(this.$('login.pointUserName'))
      }else{
        this.$confirm(this.$t('login.sendMailTo'), this.$t('warmPrompt'), {
          distinguishCancelAndClose: true,
          confirmButtonText: this.$t('sure'),
          cancelButtonText: this.$t('cancel')
        })
          .then(async () => {
            if(this.username==''){
              this.errorMsg=this.$t('site.enterUserName');
              return
            }
            let res = await this.API.forgotPwd({
              username:this.username
            })
            if(res==1){
              this.$message.error(this.$t('login.js_userNoexist'));
            }else if(res==2){
              this.$message.success(this.$t('login.js_email_Login'));
            }else if(res==3){
              this.$message.error(this.$t('login.js_email_sendError'));
            }else if(res==4){
              this.$message.error(this.$t('login.js_email_Noexist'));
            }
          })
          .catch(action => {
          });
      }
    },
    changeLan(lang){
      console.log(lang)
      this.$i18n.locale=lang;
      localStorage.setItem('lang',lang);
      localStorage.setItem('lan',lang);
      this.dialogFormVisible=false;
      location.reload();
    },
    closeLan(){
      if(!localStorage.getItem('lang')){
        this.changeLan('en_US')
      }
    },
    gotoRegister(){
      this.$router.push({path:'/register'})
      console.log(this.$route)
    }
  }
}
</script>

<style lang="less">
// @media only screen and (max-width: 768px) {
//    .login-container{

//    }
// }
// @media only screen and (min-width: 768px) {
//    .login-container{
     
//    }
// }
// @media only screen and (min-width: 992px) {
//    .login-container{
     
//    }
// }
// @media only screen and (min-width: 1100px) {
//    .login-container{
     
//    }
// }
// @media only screen and (min-width: 1560px) {
//    .login-container{
     
//    }
// }
@media only screen and (max-width: 1560px) {
  .big-login-box .login-container{
     .content .form-box{
       padding: 0px 25px 0px 25px !important;
       height: 550px !important;
       .logo-wrap{
         margin: 40px auto !important;
       }
     }
   }
}
@login_bg:#B6B5BB;
@color_highlight:#fdd000;
// body::-webkit-scrollbar { display: none };
.big-login-box::-webkit-scrollbar { display: none };
.big-login-box{
  height: 100%;
  overflow-y: auto;
.login-container{
  height: 100%;
  padding-right:-1rem;
  color:#fff;
  background: @login_bg;
  // height: 100%;
  // .login-container::-webkit-scrollbar { display: none };
  header{
    padding: 10px 20px;
    background-color: @login_bg;
    
    .download-icon{
      float: left;
      li.app-wrap {
        position: relative;
        float: left;
        margin-right: 30px;
        a{
          display: inline-block;
          width: 135px;
          height: 40px;
          background-image: url(../../assets/img/login/login-store-en.png);
          background-repeat: no-repeat;
          background-size:136px 121px;
        }
        &.google-play a {
          background-position:left -1px;
        }
        &.app-store a {
          background-position:left -40.5px;
        }
        &.local-play a {
          background-position:left -80px;
        }
        .app-dialog{
            padding:5px;
            display: none;
            position:absolute;
            left:65px;
            top: 61px;
            margin-left:-80px;
            background:#fff;
            box-shadow: 0px 0px 5px 1px rgba(0,0,0,.2) !important;
            z-index:1000;
            img{
              width:160px;
              height:160px;
            }
            i{
              position: absolute;
              color: #fff;
              top: -23px;
              left: 50%;
              margin-left: -15px;
              font-size: 30px;
              -webkit-transform: rotate(-90deg);
              -ms-transform: rotate(-90deg);
              -o-transform: rotate(-90deg);
              transform: rotate(-90deg);
            }
        }
        &:hover{
          .app-dialog{
            display: block;
          }
        }
      }
    }

    .download-icon[attr-lang=zh_CN] .app-wrap a{
      background-image: url(../../assets/img/login/login-store-zh.png);
    }
    .download-icon[attr-lang=en_US] .app-wrap a{
      background-image: url(../../assets/img/login/login-store-en.png);
    }
    .download-icon[attr-lang=de_DE] .app-wrap a{
      background-image: url(../../assets/img/login/login-store-de.png);
    }
    .download-icon[attr-lang=it_IT] .app-wrap a{
      background-image: url(../../assets/img/login/login-store-it.png);
    }
    .download-icon[attr-lang=fr_FR] .app-wrap a{
      background-image: url(../../assets/img/login/login-store-fr.png);
    }
    .download-icon[attr-lang=nl_NL] .app-wrap a{
      background-image: url(../../assets/img/login/login-store-en.png);
    }
    .download-icon[attr-lang=ru_RU] .app-wrap a{
      background-image: url(../../assets/img/login/login-store-en.png);
    }
    .right-wrap{
      float: right;
      margin: 12px 0;
      li{
        float: left;
        margin-left:20px;
        color: #56535E;
        font-size: 14px;
        cursor: pointer;
        &:hover{
          color:@color_highlight;
        }
      }
    }
  }

  .content{
    position: relative;
    box-sizing: border-box;
    background: url(../../assets/img/login/new-login-bg-min.jpg) no-repeat center center;
    background-size: cover;
    .content-text-box{
      position: absolute;
      top: 20%;
      left: calc((100% - 400px)/2);
      transform: translateX(-50%);
      color: #fff;
      text-align: center;
      h2{
        margin:0 0 15px;
        font-size: 30px;
        font-weight: 600;
        text-shadow: -2px 4px 6px #333 !important;
      }
      h4{
        margin:0;
        font-size: 18px;
        font-weight: 500;
        text-shadow: -2px 4px 6px #333 !important;
      }
    } 
    .form-box{
      float: right;
      padding: 50px 25px 0px 25px;
      box-sizing: border-box;
      width: 400px;
      height: 700px;
      background-color: rgba(60,71,91,.9);
      .logo-wrap {
        text-align: center;
        margin: 50px auto;
        img{
          height: 135px;
        }
      }
      .el-form{
        width:100%;
      }

      .el-input__inner{
        -ms-padding: 6px 0 0;
        -webkit-padding: 15px 0 0;
        -moz-padding: 15px 0 0;
        padding: 6px 0 0;
        font-size: 16px;
        color:#fff;
        background: transparent;
        border: none;
        border-bottom: 1px solid @color_highlight;
        border-radius: 0;
        &::-webkit-input-placeholder,
        &::-moz-placeholder,
        &::-moz-placeholder,
        &::-ms-input-placeholder { /* WebKit browsers 閫傞厤璋锋瓕 */
          color: #9A999A;
          text-align: center;
        }
      }
      .el-checkbox {
        color: #fff;
      }
      .el-checkbox__input.is-checked .el-checkbox__inner,
      .el-checkbox__input.is-indeterminate .el-checkbox__inner
        {
        background-color: @color_highlight;
        border-color: @color_highlight;
      }
      .el-checkbox__input.is-checked+.el-checkbox__label{
        color: @color_highlight;
      }

      .el-button{
        display: block;
        margin:10px auto;
        padding: 11px 20px;
        width:168px;
        color: #fff;
        background: transparent;
        border: none;
        &.highlight{
          font-size: 18px;
          background: @color_highlight;
          border-color: @color_highlight;
        }
      }
      .el-alert--error.is-light {
        background-color: rgba(0, 0, 0, 0.5);
        color: #ff1e1e;
      }
    }
  }

  footer{
    padding: 10px 0;
    color: #555;
    text-align: center;
    font-size: 12px;
    background-color: #B6B5BB;
    overflow: hidden;
    &>*{
      margin-top:10px;
    }
    .nav-item{
      li{
        display: inline-block;
        padding: 0 15px;
        text-align: center;
        &:not(:last-child){
          border-right: 1px solid #898989;
        }
      }
    }
    .police-info>*{
      vertical-align: middle;
    }
  }

  .country_list {
    list-style: none;
    margin: 30px 0 0;
    padding: 10px 22px;
    li {
      float: left;
      width: 130px;
      img{    
        width: 100px;
        height: 100px;
        border: 1px solid rgba(0, 0, 0, 0.29);
      }
      
      a {
        color: #5e5e5e;
        text-decoration: none;
        &:hover {
          color: #f08519;
        }
        span {
          display: block;
          padding: 15px 0 30px;
          font-size: 18px;
          text-align: center;
        }
        .flag{
          margin:0 auto;
          width: 104px;
          height: 69px;
          background: url(../../assets/img/language/new-world-flag.png) no-repeat 0 0;
          box-shadow: inset 0 0 8px rgba(0,0,0,0.3) !important;
          background-size: 100% auto;
        }
        .flag-Português{
          background-position:0 -490px;
        }
        .flag-English{
          background-position:0 -70px;
        }
        .flag-Deutsch{
          background-position:0 -140px;
        }
        .flag-Italiano{
          background-position:0 -210px;
        }
        .flag-Français{
          background-position:0 -280px;
        }
        .flag-Nederlands{
          background-position:0 -350px;
        }
        .flag-Russian{
          background-position:0 -420px;
        }
        .flag-Spanish{
          background-position:0 -560px;
        }
        .flag-Slovak{
          background-position:0 -630px;
        }
        .flag-Portugal{
          background-position:0 -700px;
        }
        .flag-Čeština{
          background-position:0 -770px;
        }
        .flag-Polska{
          background-position:0 -840px;
        }
        .flag-Japan{
          background-position:0 -910px;
        }
        .flag-Română{
          background-position:0 -979px;
        }
        .flag-ქართული{
          background-position:0 -1051px;
        }
        .flag-Suomi{
          background-position:0 -1120px;
        }
        .flag-Türkçe{
          background-position:0 -1190px;
        }
        .flag-България{
          background-position:0 -1260px;
        }
      }
    }
  }


  .el-dialog {
    width: 985px;
    text-align: center;
    .el-dialog__headerbtn {
      .el-dialog__close{
        font-size: 22px;
        color:#444;
        &:hover{
          color:#f08519;
        }
      }
    }
    .el-dialog__body {
      padding: 15px;
    }
    .clickClose {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
    }
    h2.title{
      margin: 20px;
      font-size: 36px;
      color: #5f5f5f;
      text-transform: uppercase;
      font-weight: normal;
    }
    
  }

  /*记住密码列表样式*/
.rememberList {
	display:none;
	position: absolute;
	z-index: 10;
  top: 100%;
	width:100%;
	max-height:300px;
  background: #fff;
  border-radius: 3px;
  overflow:auto;
  color: #555;
  box-shadow: 3px 3px 5px 0 rgba(0,0,0,.5);
    &.active{
      display: block;
    }
}
.rememberList li{
	position:relative;
	height: 30px;
  line-height: 30px;
  padding-left: 28px;
	overflow: hidden;
	background:url(../../assets/img/login/key.png) no-repeat 8px center;
	cursor: default;
}

.rememberList li .re_name{
	float:left;
	max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rememberList li .re_pwd{
	margin-right: 12px;
	float:right;
	height: 100%;
  width: 110px;
	border:none;
	background: transparent;
  cursor: default;
  font-size: 9px;
}
.rememberList li .close{
	display:none;
	position: absolute;
	top: 3px;
  right: 5px;
  border: none;
  background: none;
  color: #aaa;
}
.rememberList li:hover{
  background-color: #efefef;
  .close{
    display: block;
  }
}

}
}
</style>
